import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Counter extends Component {
  constructor (props) {
    super (props)
    this.state = {
      count: props.initCount
    }
    this.handleAdd = this.handleAdd.bind(this)
    this.handleAjj = this.handleAjj.bind(this)
  }
  handleAdd () {
    this.jisuan(true)
  }
  handleAjj () {
    this.jisuan(false)
  }
  jisuan (num) {
    var prveCount = this.state.count;
    var newCount = num ? prveCount + 1 :  prveCount - 1
    this.setState ( {count: newCount})
    this.props.getNum (newCount,prveCount)
  }
  render () {
    const {txt} = this.props
    return (
      <div style = {{padding: '10px'}}>
        <button onClick={this.handleAdd}>+</button>
        <button onClick={this.handleAjj}>-</button>
        &nbsp;&nbsp;
        <span>{txt} count: {this.state.count}</span>
      </div>
    )
  }
}

Counter.propTypes = {
  txt: PropTypes.string.isRequired,
  initCount: PropTypes.number
}

Counter.defaultProps = {
  initCount: 0
}


export default Counter